<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="../static/js/jQuery3.7.1.js"></script>
</head>

<body>
<div class="title">
    <table>
        <tr>
            <td>
                <span>用户名：</span>
            </td>
            <td>
                <input type="text" class="input_text" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <span>密码：</span>
            </td>
            <td>
                <input type="password" class="input_text" id="password"/>
            </td>
        </tr>
    </table>
    <input type="button" value="登录" class="submitBtn" id="sub"/>
</div>
</body>
<script>
    $(function () {
        $("#sub").click(function (){
            let username = $("#username"),password = $("#password");
            $.ajax({
                url:"/demo/user/doLogin",
                type:"POST",
                data:{
                    username: username.val(),
                    password: password.val()
                },
                success:function(data){
                    if(data.errCode===0) {
                        window.location.href = '/demo/page/index';
                    } else {
                        alert("登录失败："+data.errMsg);
                    }
                }
            });
        });
    });
</script>
<style>
    span{
        float: left;
        text-align: right;
    }
    .title{
        margin: 0 auto;
    }
    .input_text {
        width: 140px;
        height: 22px;
        line-height: 22px;
        border: 1px solid #a5c3e0;
        border-top: 1px solid #89accd;
        border-right: 1px solid #89accd;
        padding: 0 3px;
        border-radius: 3px;
        box-shadow: 1px 2px 2px #e5eaee inset;
        font-size: 12px;
        /*margin-left: 90px;*/
    }
    .submitBtn{
        margin-top: 10px;
        background-color: #2283C5 !important;
        border: 4px solid #2283C5;
        color: #FFFFFF !important;
        border-radius: 3px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
        transition: all 0.15s ease 0s;
        vertical-align: middle;
    }
    .submitBtn:hover{
        background-color: #045E9F !important;
        border: 4px solid #045E9F;
    }
    .submitBtn:active{
        left:1px;
        top:1px;
    }
</style>
</html>